  <!-- 店家动态管理 -->
  <template>
    <div class="main-body">
        <header class="main-body-search">
          <el-form :model="search" @submit.native.prevent>
            <el-row :gutter="50" type="flex" justify="space-between">
            <el-col :span="12">
              <el-button type="primary" @click="showDetail({})" icon="el-icon-plus">新建动态</el-button>
            </el-col>
            <el-col :span="12" style="text-align: right;">
              <el-form-item label class="nja-form-line">
                <el-input
                style="width: 300px;"
                  v-model.trim="search.title"
                  placeholder="动态标题"
                  clearable
                  @keyup.enter.native="searchHandle"
                >
                <div  slot="prefix" style="height: 100%;width: 100%;display: flex;justify-content: center;align-items: center;">
                  <i class="el-icon-search"></i>
                </div>
                <el-button type="primary" slot="append" @click="searchHandle">查询</el-button>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          </el-form>
        </header>
        <el-main class="main-body-table">
          <div class="table-shadow"></div>
          <el-table :data="tableData" stripe style="width: 100%" height="calc(100vh - 250px)">
            <el-table-column type="index" label="序号" align="center" width="80"></el-table-column>
            <el-table-column prop="title" label="标题" align="left" min-width="300"></el-table-column>
            <el-table-column prop="issueTime" label="发布时间" align="center" min-width="150"></el-table-column>
            <el-table-column label="发布状态" align="center">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status"
                :active-value="1"
                :inactive-value="0"
                @change="changeStatus(scope.row)"
                active-color="#13ce66"
                inactive-color="#ff4949"
              ></el-switch>
            </template>
          </el-table-column>
            <el-table-column label="操作" fixed="right" align="center" width="160px">
              <template slot-scope="scope">
                <div style="display: flex;">
                  <el-button size="mini" type="primary" @click="showDetail(scope.row)">编辑</el-button>
                  <el-button size="mini" type="danger"  @click="deleteRow(scope.row)">删除</el-button>
                </div>
              </template>
            </el-table-column>
            <template #empty>
              <el-empty description="暂无数据"></el-empty>
            </template>
          </el-table>
          <!--工具条-->
          <el-pagination
            background
            class="main-body-table-page"
            layout="total, prev, pager, next, jumper"
            @current-change="handleCurrentChange"
            :current-page="search.current"
            :page-size="search.size"
            :total="search.total"
          ></el-pagination>
        </el-main>
        <el-dialog
          :title="form.id ? '编辑动态' : '新增动态'"
          :visible.sync="dialogVisible"
          :close-on-click-modal="false"
          center
          top="50px"
          v-dialogDrag
          custom-class="mydialog"
          width="50%"
        >
          <el-form ref="form" class="formlayout" :model="form" label-width="90px" label-position="left">
            <el-row :gutter="30">
                <el-col :span="24">
                <el-form-item label="标题" prop="title" required :rules="rules">
                  <el-input v-model="form.title"   :autosize="{ minRows: 2, maxRows: 8}" type="textarea" :maxlength="200" placeholder="请输入动态名称" clearable></el-input>
                </el-form-item>
              </el-col>
             
                <el-col :span="12">
                  <el-form-item label="发布时间" prop="issueTime" required :rules="rules">
                    <el-date-picker
                      v-model="form.issueTime"
                      type="datetime"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="图片">
                    <FileUploadComp :refId="form.id" is-preview :type="['img']" biz-type="infoList"  ref="FileUploadRef"></FileUploadComp>
                  </el-form-item>
                </el-col>
            </el-row>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" style="width: 120px;" @click="saveHandle">保存</el-button>
            <el-button style="width: 120px;" @click="dialogVisible = false">取消</el-button>
          </span>
        </el-dialog>
      </div>
    </template>
    
    <script>
    import {
      SelectPage,
      DeleteHandle,
      InsertHandle,
      UpdateHandle
    } from '@/api/shop/shopInfo'
      import FileUploadComp from '../comp/FileUploadComp.vue'
    export default {
      components: {FileUploadComp},
      data() {
        return {
          dialogVisible: false,
          search: {
            current: 1,
            size: 20,
            total: 0,
            title: ''
          },
          rules: [{required: true, message: '必填'}],
          form: {
            title: '',
            subType: '',
            // type: '动态',
            createTime: '',
            content: ''
          },
          tableData: []
        }
      },
      methods: {
        showDetail(row) {
          this.form = Object.assign(
            {
              id: '',
              title: '',
              issueTime: ''
            },
            row
          )
         
          this.dialogVisible = true
          this.$nextTick(() => {
            this.$refs.FileUploadRef.loadFiles()
            this.$refs.form.clearValidate()
          })
        },
        changeStatus(row) {
          UpdateHandle({ id: row.id, status: row.status }).then((res) => {
            console.log('发布', res)
            if (res.code !== 20000) {
              row.status = 0
            }
          })
        },
        saveHandle() {
          this.$refs['form'].validate((valid) => {
            if (valid) {
              // 保存
              let params = Object.assign({}, this.form)
              let API = InsertHandle
              if (params.id) {
                API = UpdateHandle
              }
              API(params).then(async(res) => {
                console.log('RegisterRequest', res)
                if (res.code === 20000) {
                  if (!this.form.id) {
                    this.form.id = res.data.id
                  }
                  if (this.$refs.FileUploadRef) {
                    await this.$refs.FileUploadRef.uploadFile({
                      refId: this.form.id,
                      type: 'infoList'
                    })
                  }
                  this.$message({
                    type: 'success',
                    message: '操作成功'
                  })
                  this.dialogVisible = false
                  this.loadData()
                }
              })
            }
          })
        },
        deleteRow(row) {
          console.log(row)
          this.$confirm('确定删除吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            DeleteHandle({ id: row.id }).then((res) => {
              if (res.code === 20000) {
                this.$message({
                  type: 'success',
                  message: '删除成功'
                })
                this.loadData()
              }
            })
          })
        },
        handleCurrentChange(val) {
          this.search.current = val
          this.loadData()
        },
        searchHandle() {
          this.search.current = 1
          this.loadData()
        },
        loadData() {
          SelectPage(this.search)
            .then((res) => {
              console.log('success:', res)
              this.tableData = res.data.records
              this.search.total = res.data.total
            })
            .catch((err) => {
              console.log('err:', err)
            })
        }
      },
      mounted() {
        this.loadData()
      }
    }
    </script>
    
    <style lang="scss" scoped>
    .tableimg {
      width: 45px;
    }
    .formlayout {
      padding: 20px 40px;
    }
    </style>
    